<template>
	<view>
		<view class="head_wrap col_center">
			<span>已发送短信验证至</span>
			<span class="phone">{{phone}}</span>
		</view>
		
		<view class="content_wrap" style="margin-top: 20upx; ">
			<view class="content row" style="border-bottom: none;">
				<input type="number" v-model="code" placeholder="输入验证码" class="flex_one" placeholder-class="place-holder"/>
				<span class="time_wrap" v-if="timeCtn != 0">{{timeCtn}}S后重新获取</span>
				<span class="time_wrap get_active" v-else @click="retryAction">重新获取</span>
			</view>
		</view>
		
		
		<view class="bottom_btn row_center" @click="goToAction">
			<span class="flex_one" :class="{'active': (code.length == 6)}">提交</span>
		</view>
		
		<div class="modal-mask row_center" v-if="isShowPwd" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg pay_wrap">
						<view class="row_center" style="margin: 52upx 0upx;">
							<image src="../../static/img/set_success_icon.png" mode="aspectFill"></image>
							<view class="title">银行卡添加成功</view>
						</view>
						
						<view class="retry_btn" @click="goToNext">我知道了</view>
					</div>
				</div>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	import { BASE_URL,addBank } from '@/utils/api'
	
	export default {
		data() {
			return {
				isActive: false,
				isShowPwd: false,
				timeCtn: 60,
				intervalObj: {},
				code: '',
				phone: '',
				tixian: 0
			}
		},
		methods: {
			moveHandle(){},
			async addBank(){
				let params = {
					bankCode: uni.getStorageSync("bankCode"),
					bankName: uni.getStorageSync("bankName"),
					realName: uni.getStorageSync("name"),
					bankCardNo: uni.getStorageSync("card"),
					cardNo: uni.getStorageSync("identity"),
					smsCode: this.code
				};
				let res = await addBank(params);
				if(res.code == 1){
					this.isShowPwd = true;
					params.bankIcon = uni.getStorageSync('bankIcon');
					uni.setStorageSync("bankParams", params);
				}else{
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:res.message
					});
				}
			},
			goToNext(){
				this.isShowPwd = false;
				if(this.tixian == 1){
					uni.redirectTo({
						url: '/pages/tixian/tixian'
					})
				}else{
					uni.navigateBack({
						delta:3
					})
				}
				
			},
			goToAction(){
				//this.isShowPwd = true;
				if(!this.code || (this.code.length != 6)){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入正确的验证码'
					});
					return;
				}
				
				this.addBank();
			},
			countDown() {
				let that = this;
			    this.intervalObj = setInterval(function() {
			        that.timeCtn--;
			        if (that.timeCtn <= 0) {
			            that.timeCtn = 0;
			            clearInterval(that.intervalObj);
			        } else {
						
			        }
			
			    }, 1000);
			},
			retryAction(){
				this.timeCtn = 60;
				this.countDown();
			}
		},
		onLoad(opt) {
			this.phone = opt.phone;
			this.tixian = opt.tixian;
			this.countDown();
		}
	}
</script>

<style>
	page{background: #F1F1F1;height: 100vh;}
.head_wrap{background: #FFFFFF; color: #999999; font-size: 28upx; height: 207upx;line-height: 1.0;}
.head_wrap .phone{font-size: 40upx; color: #333333; margin-top: 29upx; font-weight: bold;}

.content_wrap{padding-left: 27upx; background: #FFFFFF; color: #333333; font-size: 32upx;}
.content_wrap .content{height: 100upx; border-bottom: solid 2upx #E6E6E6; padding-right: 30upx;}
.content_wrap .content image{height: 48upx; width: 48upx; }
.content_wrap .content input{text-align: left;}
.content_wrap .content .time_wrap{text-align: center; width: 220upx; height: 72upx; line-height: 72upx; border-radius: 12upx;background: #CCCCCC;color: #FFFFFF; font-size: 24upx;}
.get_active{font-size: 32upx!important; color: #333333!important; background: #FFCA0A!important;}

.bottom_btn{padding: 0upx 30upx; margin-top: 60upx;}
.bottom_btn span{background: #CCCCCC; color: #FFFFFF; font-size: 32upx; height: 94upx; line-height: 94upx; text-align: center;
	font-weight: bold;border-radius: 12upx;}
.active{background: #FFCA0A!important; color: #333333!important;}

.place-holder{font-size: 32upx; color: #CCCCCC;}

.pay_wrap image{width: 30upx; height: 30upx; margin-right: 20upx;}
.pay_wrap .title{color: #333333; font-size: 32upx; line-height: 1.0;}
.pay_wrap .retry_btn{text-align: center; font-size: 32upx; color: #FFCA0A; box-sizing: border-box; width: 100%; border-top: 2upx solid #E6E6E6; height: 100upx; line-height: 100upx;}

</style>
